<template>
    <view class="panel">
        <view class="content">
            <view class="func-title">AI文字（普通版）</view>
            <view class="table">
                <view class="tr">
                    <view class="label">
                        <text>单价</text>
                    </view>
                    <view class="value">
                        <view v-if="priceSetting.text35 > 0">
                            <text class="weight">{{priceSetting.text35}}</text>
                            <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                        </view>
                        <text v-else>免费</text>
                    </view>
                </view>
                <view class="tr">
                    <view class="label">会员价</view>
                    <view class="value">
                        <text v-if="priceSetting.text35_vip != 0">会员免费</text>
                        <view v-else-if="priceSetting.text35 > 0">
                            <text class="weight">{{priceSetting.text35}}</text>
                            <text style="margin-left: 6rpx;"> {{priceSetting.title}}/次</text>
                        </view>
                        <text v-else>免费</text>
                    </view>
                </view>
                <view class="tr" style="height: 160rpx;">
                    <view class="label">说明</view>
                    <view class="value">
                        <view>包含所有<text class="weight" style="margin: 0 4rpx;">普通版 AI</text>文本类创作：AI对话、创作、模拟、擂台、批量生成、长篇写作、思维导图、AI小工具（如写大纲、写歌词）等</view>
                    </view>
                </view>
            </view>
    
            <view class="func-title">AI文字（高级版）</view>
            <view class="table">
                <view class="tr">
                    <view class="label">
                        <text>单价</text>
                    </view>
                    <view class="value">
                        <view v-if="priceSetting.text40 > 0">
                            <text class="weight">{{priceSetting.text40}}</text>
                            <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                        </view>
                        <text v-else>免费</text>
                    </view>
                </view>
                <view class="tr">
                    <view class="label">会员价</view>
                    <view class="value">
                        <text v-if="priceSetting.text40_vip != 0">会员免费</text>
                        <view v-else-if="priceSetting.text40 > 0">
                            <text class="weight">{{priceSetting.text40}}</text>
                            <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                        </view>
                        <text v-else>免费</text>
                    </view>
                </view>
                <view class="tr" style="height: 160rpx;">
                    <view class="label">说明</view>
                    <view class="value">
                        <view>包含所有<text class="weight" style="margin: 0 4rpx;">高级版AI</text>文本类创作：AI对话、创作、模拟、擂台、批量生成、长篇写作、思维导图、AI小工具（如写大纲、写歌词）等</view>
                    </view>
                </view>
            </view>
    
            <view v-if="drawIsOpen">
                <view class="func-title">AI绘画</view>
                <view class="table">
                    <view class="tr">
                        <view class="label">
                            <text>单价</text>
                        </view>
                        <view class="value">
                            <view v-if="priceSetting.draw > 0">
                                <text class="weight">{{priceSetting.draw}}</text>
                                <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                            </view>
                            <text v-else>免费</text>
                        </view>
                    </view>
                    <view class="tr">
                        <view class="label">会员价</view>
                        <view class="value">
                            <text v-if="priceSetting.draw_vip != 0">会员免费</text>
                            <view v-else-if="priceSetting.draw > 0">
                                <text class="weight">{{priceSetting.draw}}</text>
                                <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                            </view>
                            <text v-else>免费</text>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="videoIsOpen">
                <view class="func-title">AI视频</view>
                <view class="table">
                    <view class="tr">
                        <view class="label">
                            <text>单价</text>
                        </view>
                        <view class="value">
                            <view v-if="priceSetting.video > 0">
                                <text class="weight">{{priceSetting.video}}</text>
                                <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                            </view>
                            <text v-else>免费</text>
                        </view>
                    </view>
                    <view class="tr">
                        <view class="label">会员价</view>
                        <view class="value">
                            <text v-if="priceSetting.video_vip != 0">会员免费</text>
                            <view v-else-if="priceSetting.video > 0">
                                <text class="weight">{{priceSetting.video}}</text>
                                <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                            </view>
                            <text v-else>免费</text>
                        </view>
                    </view>
                    <view class="tr">
                        <view class="label">说明</view>
                        <view class="value">
                            <view>当前仅PC版支持AI视频</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="musicIsOpen">
                <view class="func-title">AI音乐</view>
                <view class="table">
                    <view class="tr">
                        <view class="label">
                            <text>单价</text>
                        </view>
                        <view class="value">
                            <view v-if="priceSetting.music > 0">
                                <text class="weight">{{priceSetting.music}}</text>
                                <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                            </view>
                            <text v-else>免费</text>
                        </view>
                    </view>
                    <view class="tr">
                        <view class="label">会员价</view>
                        <view class="value">
                            <text v-if="priceSetting.music_vip != 0">会员免费</text>
                            <view v-else-if="priceSetting.music > 0">
                                <text class="weight">{{priceSetting.music}}</text>
                                <text style="margin-left: 6rpx;">{{priceSetting.title}}/次</text>
                            </view>
                            <text v-else>免费</text>
                        </view>
                    </view>
                    <view class="tr">
                        <view class="label">说明</view>
                        <view class="value">
                            <view>当前仅PC版支持AI音乐</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            priceSetting: {},
			drawIsOpen: false,
			videoIsOpen: false,
			musicIsOpen: false
        };
    },
    onLoad(options) {
		app.globalData.util.getSetting().then(res => {
			this.setData({
				priceSetting: res.priceSetting,
				drawIsOpen: res.drawIsOpen,
				videoIsOpen: res.videoIsOpen,
				musicIsOpen: res.musicIsOpen
			})
		})
    },
    methods: {}
};
</script>
<style>
page {
    box-sizing: border-box;
    background: #f7f7f7;
}
.panel {
    /* margin: 30rpx; */
    padding: 30rpx;
    background: #fff;
    border-radius: 20rpx;
}
.title {
    font-size: 32rpx;
    margin-bottom: 30rpx;
    text-align: center;
    color: #aaa;
}
.content {
    line-height: 1.6;
    color: #666;
}
.func-title {
    background: #f8f8f8;
    height: 76rpx;
    line-height: 72rpx;
    font-size: 26rpx;
    padding: 0 20rpx;
    border: 1px solid #ededed;
    width: 690rpx;
    box-sizing: border-box;
    font-weight: bold;
}
.table {
    display: table;
    font-size: 26rpx;
    border-left: 1px solid #ededed;
    width: 690rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
}
.table .tr {
    display: flex;
    align-items: flex-start;
    height: 80rpx;
}
.table .label {
    background: #f8f8f8;
    width: 120rpx;
    min-width: 120rpx;
    height: 100%;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}
.table .value {
    width: 568rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx 20rpx;
    height: 100%;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}
.table .value .weight {
    font-weight: bold;
    color: #03b9bd;
}
</style>
